<!--
 @description：菜品管理
 @author: Xg
 @date: 2021/6/29 19:08
-->
<template>
  <div class="main">
    <el-row class="h100">
      <!--商家部分-->
      <el-col :span="4" class="main-left">
        <div class="search">
          <el-input
            v-model="storeName"
            placeholder="商家"
            clearable
            style="width: 41%"
            @keydown.enter.native="listStore"
          />
          <el-button @click="listStore">搜索</el-button>
          <el-button @click="addStore">添加</el-button>
        </div>
        <div class="content">
          <el-col v-for="(item,index) in stores" :key="index" :span="4" class="card-panel-col">
            <div :class="{active : active == item.storeName}">
              <div class="card-title" @click="clickStore(item)">
                <div class="right-format">
                  <div id="title-storeName" class="title-span">
                    <el-col :span="19">
                      {{ item.storeName }}
                    </el-col>
                    <el-col :span="5">
                      <i id="el-store-icon" class="el-icon-edit" @click="editStore(item.storeId)" /> <i class="el-icon-delete" @click="deleteStore(item.storeId)" />
                    </el-col>
                  </div>
                  <div id="el-div-descript" class="div-descript">
                    累计已点<span id="el-store-count" class="el-class-store-count" style="font-size: 14px">{{ item.count }}</span>单
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>

      <!--菜品部分-->
      <el-col :span="20" class="main-center">
        <div class="main-center-top">
          <el-input
            v-model="foodParams.foodName"
            placeholder="请输入菜品名称"
            clearable
            style="width: 250px"
            @keydown.enter.native="list"
          />
          <el-button type="primary" icon="el-icon-search" @click="list">搜索</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addFood">新增菜品</el-button>
        </div>

        <div class="main-center-bottom">
          <el-row>
            <el-col v-for="(item,index) in foods" :key="index" style="margin: 5px;width: 240px;">
              <div id="food" class="food-info">
                <b id="el-foodName" class="el-food-name">{{ item.foodName }}</b>
                <p>
                  <el-rate
                    v-model="item.spicy"
                    :max="3"
                    :low-threshold="lowThreshold"
                    :high-threshold="highThreshold"
                    :texts="texts"
                    show-text
                    :icon-classes="iconClasses"
                    :colors="['black','red','red']"
                    disabled-void-icon-class="iconfont icon-lajiao"
                    disabled
                  />
                </p>
                <p id="el-foodPriceCount">
                  ￥<span id="el-foodPrice" class="el-food-price">{{ item.price.toFixed(2) }}</span>
                  <span id="el-foodCount" class="el-food-count">&nbsp;&nbsp;&nbsp;累计点过<span id="foodCount" class="food-count">{{ item.count }}</span>单</span>
                </p>
                <p>
                  <el-link id="el-editIcon" type="primary" icon="el-icon-edit" @click="editFood(item.foodId)">修改</el-link>
                  <el-link id="el-deleteIcon" type="danger" icon="el-icon-delete-solid" @click="deleteFood(item.foodId)">删除</el-link>
                </p>
              </div>
            </el-col>
            <!--            <el-col v-for="(item,index) in foods" :key="index" :span="1" :offset="0" class="card-panel-col-food">
              <div class="card-title-food">
                &lt;!&ndash;                  <img src="../../../assets/test_images/food1.jpg" class="image-food">&ndash;&gt;
&lt;!&ndash;                <img :src="item.imgVO" class="image-food">&ndash;&gt;
                <div class="right-format-food">
                  <span class="title-span-food">{{ item.foodName }}</span>
                  <div class="middle-food">
                    ￥<span class="money">{{ item.price }}</span> <span class="count">累计点过{{ item.count }}单</span>
                  </div>
                  <div class="div-descript-food">
                    <el-link type="primary" icon="el-icon-setting" @click="editFood(item.foodId)">修改</el-link>
                    <el-link type="danger" icon="el-icon-s-open" @click="deleteFood(item.foodId)">删除</el-link>
                  </div>
                </div>
              </div>
            </el-col>-->
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 菜品编辑页面 -->
    <saveFood
      v-if="saveFoodVisible"
      :food-id="foodId"
      :save-food-visible="saveFoodVisible"
      :selected-store="selectedStore"
      @close="closeFoodDialog"
    />
    <!-- 商家编辑页面 -->
    <saveStore
      v-if="saveStoreVisible"
      :store-id="storeId"
      :save-store-visible="saveStoreVisible"
      @close="closeStoreDialog"
    />
  </div>
</template>

<script>
import { list as listStore, deleteStore } from '@/api/basic/store'
import { list, deleteFood, downloadImportTemplate, importExcel } from '@/api/basic/food'
import saveFood from '@/views/basic/dishes/saveFood'
import saveStore from '@/views/basic/dishes/saveStore'
export default {
  name: 'Dishes',
  components: {
    saveFood,
    saveStore
  },
  data() {
    return {
      lowThreshold: 1,
      highThreshold: 3,
      saveFoodVisible: false,
      saveStoreVisible: false,
      foodId: null,
      storeId: null,
      storeName: null,
      stores: [],
      texts: ['不辣', '微辣', '重辣'],
      iconClasses: ['iconfont icon-lajiao', 'iconfont icon-lajiao', 'iconfont icon-lajiao'],
      // 当前选中的商家
      selectedStore: { },
      foods: [],
      foodParams: {
        foodName: null,
        pageSize: 50,
        pageIndex: 1
      },
      pagination: {
        total: 0,
        pageIndex: 1
      },
      active: null
    }
  },
  mounted() {
    this.listStore()
  },
  methods: {
    // 关闭菜品编辑页面
    closeFoodDialog(isRefresh) {
      this.foodId = null
      this.saveFoodVisible = false
      if (isRefresh) {
        this.list()
      }
    },
    // 关闭商家编辑页面
    closeStoreDialog(isRefresh) {
      this.saveStoreVisible = false
      if (isRefresh) {
        this.listStore()
      }
    },
    // 获取商家列表
    listStore() {
      listStore({ storeName: this.storeName }).then(res => {
        if (res.code === 200) {
          this.stores = res.data
          // this.stores.forEach(function(list, index) {
          //   if (list.imgVO) {
          //     list.imgVO = 'data:image/jpeg;base64,' + list.imgVO
          //   }
          // })
          if (this.stores && this.stores.length > 0) {
            // 如果商家有值，默认查第一条
            this.clickStore(this.stores[0])
          }
        }
      })
    },
    // 点击商家
    clickStore(obj) {
      this.active = obj.storeName
      this.selectedStore = obj
      this.list()
    },
    // 获取菜品分页列表
    list() {
      const params = this.foodParams
      params.storeId = this.selectedStore.storeId
      params.storeName = this.selectedStore.storeName
      list(this.foodParams).then(res => {
        if (res.code === 200) {
          this.foods = res.data
          // this.foods.forEach(function(list, index) {
          //   if (list.imgVO) {
          //     list.imgVO = 'data:image/jpeg;base64,' + list.imgVO
          //   }
          // })
        }
      })
    },
    // 删除菜品
    deleteFood(foodId) {
      this.foodId = foodId
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteFood({ foodId: this.foodId })
            .then(res => {
              if (res.code === 200) {
                this.$message.success('删除成功!')
                this.list()
              }
            })
        })
    },
    // 删除商家
    deleteStore(storeId) {
      this.storeId = storeId
      this.$confirm('该商家下有' + this.foods.length + '个菜品，确认删除?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteStore({ storeId: this.storeId })
            .then(res => {
              if (res.code === 200) {
                this.$message.success('删除成功!')
                this.listStore()
              }
            })
        })
    },
    // 新增商家
    addStore() {
      this.storeId = null
      this.saveStoreVisible = true
    },
    // 编辑商家
    editStore(storeId) {
      this.storeId = storeId
      this.saveStoreVisible = true
    },
    // 新增菜品
    addFood() {
      this.foodId = null
      this.storeId = this.selectedStore.storeId
      this.saveFoodVisible = true
    },
    // 编辑菜品
    editFood(foodId) {
      this.foodId = foodId
      this.saveFoodVisible = true
    },
    // 获取导入模板
    downloadImportTemplate() {
      downloadImportTemplate().then(res => {
        if (res.code === 200) {
          this.$message.success('获取成功')
        }
      })
    },
    // 导入
    importFood() {
      importExcel().then(res => {
        if (res.code === 200) {
          this.$message.success('导入成功')
        }
      }).catch().then(res => {
        this.$message.error('导入失败')
      })
    }
  }
}
</script>

<style lang="scss">
  .main {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    padding: 10px;
    .h100 {
      height: 100%;
      width: 100%;
    }
    .main-left{
      height: 100%;
      .search{
        height: 33px;
      }
      .content {
        height: calc(100% - 33px);
        overflow: auto;
      }
    }
    .main-center{
      height: 100%;
      .main-center-top{
        height: 37px;
      }
      .main-center-bottom{
        height: calc(100% - 37px);
        overflow: auto;
      }
    }
  }
  .el-class-store-count {
    font-size: 14px;
    color: #CB3A57;
  }

  .card-panel-col {
    width: 100%;
    height: 70px;
    .card-title {
      padding: 3px;
      display: flex;
      align-items: center;
      .right-format {
        width: 100%;
        height: 60px;
        .title-span {
          font-size: 18px;
          color: #666666;
          font-weight: bold;
          line-height: 40px;
          height: 35px;
        }
        .el-icon-edit {
          color: #66b1ff;
        }
        .div-descript {
          font-size: 5px;
          color: gray;
        }
      }
    }
  }
  .food-info {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 13px;
    .el-food-name {
      font-size: 18px;
      color: #666666;
    }
    .el-food-price {
      color: red;
      font-size: 20px;
      font-weight: bold;
    }
    .el-food-count {
      font-size: 11px;
      color: #5a5e66;
    }
    .food-count {
      color: #CE5639;
      font-size: 14px;
    }
  }
  .card-panel-col:hover {
    cursor: pointer;
    /*border: 2px chartreuse;*/
    /*background: #9BC4D6;*/
    /*#title-storeName {*/
    /*  color: white;*/
    /*}*/
    /*#el-store-icon {*/
    /*  color: white;*/
    /*}*/
    /*#el-store-count {*/
    /*  color: white;*/
    /*}*/
    /*#el-div-descript {*/
    /*  color: white;*/
    /*}*/
  }
  .image {
    height: 60px;
    width: 60px;
  }
  .active {
    /*background: #62A8CF;*/
    /*#title-storeName {*/
    /*  color: white;*/
    /*}*/
    /*#el-store-icon {*/
    /*  color: white;*/
    /*}*/
    /*#el-store-count {*/
    /*  color: white;*/
    /*}*/
    /*#el-div-descript {*/
    /*  color: white;*/
    /*}*/
    border: 1px #79BBFF solid;

  }
  .card-panel-col-food {
    height: 140px;
    width: 220px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  .card-title-food {
    display: flex;
    align-items: center;
  }
  .right-format-food {
    width: 180px;
    height: 140px;
  }
  .image-food {
    height: 140px;
    width: 180px;
  }
  .title-span-food {
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
  }
  .div-descript-food {
    font-size: 10px;
    margin-left: 5px;
    color: gray;
    margin-top: 40px;
  }
  .middle-food {
    height: 30px;
    margin-top: 20px;
  }
  .money {
    font-size: 20px;
    color: #66b1ff;
  }
  .count {
    font-size: 10px;
    color: gray;
    margin-left: 5px;
  }
  .main-right {
    height: 100%;
    overflow: hidden;
  }
</style>
